<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import {randomMath,randomMathNotSame} from '@/util/util'
const router = useRouter()

let cover = ref<string>(
  "https://s1.aigei.com/src/img/gif/48/486a9441f63c46f9962e26dce72b9871.gif?imageMogr2/auto-orient/thumbnail/!132x132r/gravity/Center/crop/132x132/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:_4Osmh0H33CiAOKa8cw2YLGuJyA="
)
let cake_default = ref<string>('https://s1.aigei.com/src/img/png/4b/4b9c41c89a8e49859b7cc1524491bbfb.png?imageMogr2/auto-orient/thumbnail/!132x132r/gravity/Center/crop/132x132/quality/85/%7Cwatermark/3/image/aHR0cHM6Ly9zMS5haWdlaS5jb20vd2F0ZXJtYXJrLzYwLTAucG5nP2U9MTczNTQ4ODAwMCZ0b2tlbj1QN1MyWHB6ZnoxMXZBa0FTTFRrZkhON0Z3LW9PWkJlY3FlSmF4eXBMOnpPeU11WWFhOVp2TzZBNGpxRVNFSVpJN3BJaz0=/dissolve/20/gravity/NorthWest/dx/42/dy/63/ws/0.0/wst/0&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:GAF_ikePn58csOAStxYhG-NE178=')
// 锦鲤配置
let fishMaskConfig = reactive({
    fish_cover:'https://s1.aigei.com/src/img/gif/04/047d025d5df64c2bb04e7c12ad3150f5.gif?imageMogr2/auto-orient/thumbnail/!132x132r/gravity/Center/crop/132x132/quality/85/&e=1735488000&token=P7S2Xpzfz11vAkASLTkfHN7Fw-oOZBecqeJaxypL:FcbViTD6BtrKYYKvMmzBcTJDx7U=',
    mask:true
})

// msg配置
let msgConfig = reactive({
    show:false,
    title:'提示信息'
})

let gifArray = ref<any>([
]);

interface gifItem {
    id:string|number,
    title:string,
    done:boolean,
    default:string,
    cake:string|boolean
}

let count = randomMath(1,2)
let randData = () => {
    for(let i = 0;i < 9; i++) {
        let item:gifItem = {
            id:i+1 <= 9 ? '0' + (i+1) : i+1,
            title:randomMath(1,20) + '金币',
            done:false,
            default:cover.value,
            cake:false
        }
        gifArray.value.push(item)
    }
    let sr:number = 0
    for(let c = 0;c < count;c++) {
        let d = randomMath(0,8)
        sr = d
        console.log('cake.value',cake_default);
        
        gifArray.value[d]["cake"] = cake_default.value
    }
    let t = randomMathNotSame(0,8,sr)
    console.log(gifArray.value[t]);
    console.log('t',t);
    
    gifArray.value[t].title = '21幸运币'
}

randData()
let gifClickHandler = (gifItem: any) => {
  gifArray.value.map((item:gifItem) => {
    if (item.id == gifItem.id) {
      item.done = true;
      let len = gifArray.value.filter((item:gifItem) => item.done).length
      console.log('len',len);
      
      if(len == 9) {
        // 显示弹窗
        console.log('数量已经到了');
        
        msgConfig.show = true
        msgConfig.title = '全部福袋已经开启快去兑奖吧'
        closeMsg()
      }
    }
  });  
};

// 关闭信息提示
let closeMsg = () => {
    setTimeout(() => {
        msgConfig.show = false
    }, 1000);
}

let backHandler = () => {
  router.push("/home");
};

</script>

<template>
  <div class="card">
    <div class="card-container">
      <button class="back" @click="backHandler">返回</button>
      <div class="game-container">
        <div class="game-title">
          幸运星礼包
          <br />
          <span>(21字样为幸运·可兑换21币)</span>
          <br />
          <span>(蛋糕为超级大奖,兼中兼得)</span>
        </div>
        <div class="game-content animate__animated animate__zoomInDown">
          <div
            class="card-content"
            :class="[gifItem.done ? 'active-card' : '']"
            @click="gifClickHandler(gifItem)"
            v-for="(gifItem, index) in gifArray"
            :key="index"
          >
            <div class="just">
              <img class="gif-cover" :src="gifItem.default" alt="" srcset="" />
            </div>
            <div class="card-back">
                <p v-if="!gifItem.cake">
                <span>{{gifItem.id}}</span>
                <span>{{ gifItem.title }}</span>
                </p>
                <img v-if="gifItem.cake" class="gif-cover" :src="gifItem.cake" alt="" srcset="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="fish-mask">
        <h2>锦鲤大奖</h2>
        <img :src="fishMaskConfig.fish_cover" class="fish-cover" alt="">
    </div> -->
    <!-- 提示 -->
    <div class="msg-container" v-show="msgConfig.show">
        {{ msgConfig.title }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100vh;
  background-image: url("@/assets/images/mobiel/mobiel_bg_1.png");
  .card-container {
    width: 100%;
    height: 100%;
    background-color: rgba(55, 55, 55, 0.5);
    .back {
      margin: 20px auto 20px 20px;
      font-family: 摆烂躺平, "Microsoft YaHei UI Light";
      font-size: 18px;
      outline: none;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      line-height: 35px;
      text-align: center;
      color: #fff;
      border: none;
      background-color: rgb(240, 98, 146);
      box-shadow: 0px 0px 10px rgb(240, 98, 146);
    }
    .game-title {
      margin-top: 10%;
      color: #fff;
      font-family: "Courier New", Courier, monospace;
      width: 100%;
      font-weight: bold;
      height: 60px;
      line-height: 20px;
      text-align: center;
      span {
        font-size: 12px;
      }
    }
    .game-content {
      width: 80%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .card-content {
        margin: 20px 0px;
        transform-style: preserve-3d;
        perspective: 500;
        position: relative;
        width: 33.3%;
        box-sizing: border-box;
        height: 110px;
        transition: all 1s linear;
      }

      //   .card-content:hover {
      //     transform: rotateY(180deg);
      //   }
      .active-card {
        transform: rotateY(180deg);
      }

      .card-content div {
        width: 100%;
        height: 100%;
        text-align: center;
        position: absolute;
        backface-visibility: hidden;
        text-align: center;
        font-size: 2rem;
      }

      .gif-cover {
        width: 100%;
        height: 100%;
      }
      .card-content .just {
        // background-color: #a7a6a6;
      }

      .card-content .card-back {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: lightpink;
        transform: rotateY(180deg);
        border-radius: 100%;
        p{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 0, 0.91);
            span:nth-child(1) {
                font-size: 14px;
                color: #fff;
                margin-bottom: 20px;
            }
            span:nth-child(2){
                font-size: 16px;
                background: rgba(55, 55, 55, 0.636);
                border-radius: 20px;
                color: cornsilk;
                box-sizing: border-box;
                padding: 6px 15px;
            }
        }
      }
    }
  }
}
.msg-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 180px;
    max-width: 70%;
    min-height: 40px;
    padding: 6px 12px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: rgba(55, 55, 55, 0.5);
}
</style>